<template>
  <div class="chart-circle">
    <div>
      <div>
        <div class="kd" :style="{backgroundImage: `url(${require('./assets/img/kd.png')})`}">
          <div class="circle-value">
            <h1>{{ totalNum }}</h1>
            <p>今日处置事件(件)</p>
          </div>
          <div class="in-line">
            <a-progress
              type="dashboard"
              :showInfo="false"
              strokeColor="#00B6F8"
              :percent="totalDisposedPercent"
              :width="310"
              :strokeWidth="3.2"
              :gapDegree="60" />
          </div>
          <div class="out-line">
            <a-progress
              type="dashboard"
              :showInfo="false"
              strokeColor="#EAC328"
              :percent="totalExigencyPercent"
              :width="360"
              :strokeWidth="2.8"
              :gapDegree="68" />
          </div>
        </div>
      </div>
    </div>
    <div class="circle-footer">
      <div :style="{backgroundImage: `url(${require('./assets/img/k-1.png')})`}">
        <p>今⽇处置总数</p>
        <p>{{ totalDisposed }}<span>件</span></p>
      </div>
      <div :style="{backgroundImage: `url(${require('./assets/img/k-2.png')})`}">
        <p>今⽇观察总数</p>
        <p>{{ totalExigency }}<span>件</span></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      default: () => {},
      type: Object
    }
  },
  computed: {
    totalDisposed() {
      return this.data.totalDisposed || 0
    },
    totalExigency() {
      return this.data.totalExigency || 0
    },
    totalNum() {
      return Number(this.totalDisposed) + Number(this.totalExigency)
    },
    totalDisposedPercent() {
      return Number(this.totalDisposed) / this.totalNum
    },
    totalExigencyPercent() {
      return Number(this.totalExigency) / this.totalNum
    }
  }
};
</script>
<style lang="less">
.chart-circle {
  .ant-progress-circle-trail {
    display: none;
  }
}

</style>
<style scoped lang="less">
.chart-circle {
  width: 658px;
  height: 645px;
  background: rgba(18, 42, 115, 0.4);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  >div:first-child {
    width: 561px;
    height: 550px;
    border-radius: 100%;
    background: rgba(18, 42, 115, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    >div {
      display: flex;
      justify-content: center;
      width: 502px;
      height: 492px;
      background: rgba(18, 42, 115, 0.8);
      border-radius: 100%;
      .kd {
        width: 476px;
        height: 400px;
        background-size: 476px 400px;
        background-position: center;
        margin-top: 12px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .circle-value {
    width: 259px;
    height: 254px;
    background: linear-gradient(0deg, #0054AA 0%, #0167BE 47%, #0054AA 100%);
    border-radius: 100%;
    margin-top: 100px;
    text-align: center;
    h1 {
      font-size: 99px;
      font-weight: 500;
      color: #DFFFFF;
      line-height: 45px;
      width: 100%;
      margin-top: 60px;
    }
    p {
      font-size: 26px;
      font-weight: normal;
      color: #DFFFFF;
      line-height: 32px;
      width: 100%;
    }
  }
  .in-line{
    width: 310px;
    position: absolute;
    left: 50%;
    margin-left: -155px;
    bottom: -5px;
  }
  .out-line{
    width: 360px;
    position: absolute;
    left: 50%;
    margin-left: -180px;
    bottom: -28px;
  }
}

.circle-footer {
  position: absolute;
  bottom: 20px;
  display: flex;
  width: 402px;
  justify-content: space-between;
  >div {
    width: 191px;
    height: 118px;
    background-size: 100% 100%;
    background-position: center;
    >p:first-child {
      font-size: 16px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1;
      margin-top: 27px;
      text-align: center;
    }
    p:nth-child(2) {
      font-size: 40px;
      text-align: center;
      font-weight: 500;
      color: #2AE8EE;
      margin-top: -12px;
      span {
        font-size: 23px;
      }
    }
    &:last-child {
      >p:nth-child(2) {
        color: #FFCC00;
      }
    }
  }
}
</style>
